<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>录取结果查询</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 600px;
            margin: auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #218838;
        }

        .result {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #28a745;
            border-radius: 4px;
            background-color: #e7f9e7;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
        }

        th,
        td {
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #f6f6f6;
        }
    </style>
</head>

<body>

    <div class="container">
        <h1>录取结果查询</h1>
        <div class="form-group">
            <label for="studentId">请输入学生ID:</label>
            <input type="text" id="studentId" placeholder="学生ID" name="stu_id">
        </div>
        <button onclick="fetchAdmissionResult()">查询录取结果</button>

        <div class="result" id="result" style="display: none;">
            <h2>录取信息</h2>
            <table>
                <tr>
                    <th>学生ID</th>
                    <th>姓名</th>
                    <th>录取状态</th>
                </tr>
                <tbody id="resultTableBody">
                    <!-- 结果将填充到这里 -->
                </tbody>
            </table>
        </div>
    </div>

    <script>
        async function fetchAdmissionResult() {
            const studentId = document.getElementById('studentId').value;

            // 清空之前的结果
            const resultTableBody = document.getElementById('resultTableBody');
            resultTableBody.innerHTML = '';

            try {
                const response = await fetch('/search_result/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRFToken': getCSRFToken(),
                    },
                    body: new URLSearchParams({
                        'student_id': studentId  // 发送学生ID到后端
                    })
                });

                const data = await response.json();

                // 检查返回的数据
                if (data.msg) {
                    const result = data.msg;
                    const row = `<tr>
                            <td>${result.id}</td>
                            <td>${result.name}</td>
                            <td>${result.state}</td>
                         </tr>`;
                    resultTableBody.innerHTML += row;
                    document.getElementById('result').style.display = 'block';
                } else if (data.error) {
                    alert(data.error);
                    document.getElementById('result').style.display = 'none';
                }
            } catch (error) {
                console.error('Error fetching admission result:', error);
                alert('发生错误，请稍后再试！');
            }
        }

        function getCSRFToken() {
            let cookies = document.cookie.split(';');
            for (let cookie of cookies) {
                cookie = cookie.trim();
                if (cookie.startsWith('csrftoken=')) {
                    return cookie.split('=')[1];
                }
            }
            return '';
        }
    </script>

</body>

</html>